<template>
	<view>
		<!-- <u-navbar title="商城" :is-back="false" :color="'#000'"></u-navbar> -->
		<view style="position: relative;">
			<image src="http://7n.gl.file.91golf.com/7207cffd50ef4bb0a6fe2909aace5d8e.jpg" mode="widthFix"
				style="width: 100%;"></image>
			<view style="position: absolute;left: 0;right: 0;padding: 90rpx 168rpx;top: 0;display: flex;">
				<image src="http://7n.gl.file.91golf.com/a0c99c4a7a724fa883d8bc456a6ced3d.png" mode="widthFix"
					style="width: 168rpx;" class="animation-fade"></image>
				<view style="text-align: center;margin-left: 100rpx;width: 128rpx;padding: 10rpx 0;">
					<view
						style="font-size: 72rpx;font-weight: bolder;color: #FFFFFF;text-shadow: 0px 3rpx 8rpx rgba(28,0,79,0.6300);">
						{{jifen}}
					</view>
					<view
						style="font-size: 28rpx;font-weight: bolder;color: #FFFFFF;text-shadow: 0px 3rpx 8rpx rgba(28,0,79,0.6300);">
						我的积分</view>
				</view>
				<view style="position: absolute;top: 120rpx;left: 33rpx;font-size: 24rpx;color: #fff;"
					@click="tojifendetail">积分明细</view>
			</view>
			<view style="width: 100%;padding:40rpx 150rpx;display: flex;">
				<view style="width: 50%;text-align: center;font-size: 32rpx;font-weight: bolder;"
					:style="[{'color':select==0?'#000':'#888888'}]" @click="selectIten(0)">
					<image v-show="select==0" src="../../static/img/ic-credit-mission.png" mode="widthFix"
						style="width: 32rpx;margin-right: 8rpx;top: 5rpx;position: relative;"></image>
					积分任务
				</view>
				<view style="width: 50%;text-align: center;font-size: 32rpx;font-weight: bolder;"
					:style="[{'color':select==1?'#000':'#888888'}]" @click="selectIten(1)">
					<image v-show="select==1" src="../../static/img/ic-credit-shop.png" mode="widthFix"
						style="width: 32rpx;margin-right: 8rpx;top: 5rpx;position: relative;"></image>
					积分商城
				</view>
			</view>
			<view v-show="select==0" style="padding: 0 32rpx;">
				<view style="padding: 32rpx;display: flex;border-bottom: 1rpx solid #DBDDE0;position: relative;"
					v-for="item in taskList" @click="wanchengrenwu(item)">
					<image mode="widthFix" :src="item.icon" style="width: 80rpx;"></image>
					<view style="margin-left: 24rpx;width: calc(100% - 80rpx);">
						<view style="display: flex;">
							<view style="font-size: 32rpx;color: #333333;font-weight: bolder;">{{item.name}}</view>
							<image src="../../static/img/ic-credit-s.png"
								style="width: 32rpx;margin-left: 20rpx;height: 32rpx;margin-top: 7rpx;margin-right: 8rpx;">
							</image>
							<view style="font-size: 34rpx;color: #FA5046;font-weight: 400;margin-top: 7rpx;">
								+{{item.jifen}}</view>
						</view>
						<view style="font-size: 24rpx;color: #999999;font-weight: 400;margin-top: 15rpx;">
							{{item.content}}
						</view>
						<view v-if="item.name=='分享好友'" style="display: flex;margin-top: 10rpx;">
							<view style="font-size: 22rpx;font-weight: bold;margin-right: 10rpx;">任务进度：</view>
							<u-line-progress style="width:350rpx;" active-color="#2979ff" :percent="getbili()">
							</u-line-progress>
						</view>
					</view>
					<button
						style="padding-left: 0;padding-right: 0;line-height: 40rpx;text-align: center;width: 104rpx;height: 40rpx;background: #FF9240;border-radius: 12rpx;color: #FFFFFF;font-size: 24rpx;position: absolute;right: 0;top: 60rpx;"
						v-if="item.name=='分享好友' && !item.siwanchen" open-type="share">去完成</button>
					<view v-if="item.name!=='分享好友'">
						<view v-if="item.siwancheng"
							style="text-align: center;width: 104rpx;height: 40rpx;background: #FFC8A9;border-radius: 12rpx;color: #FFFFFF;font-size: 24rpx;position: absolute;right: 0;top: 60rpx;">
							已完成</view>
						<view v-if="!item.siwancheng"
							style="text-align: center;  width: 104rpx;height: 40rpx;background: #FF9240;border-radius: 12rpx;color: #FFFFFF;font-size: 24rpx;position: absolute;right: 0;top: 60rpx;">
							去完成</view>
					</view>

				</view>
			</view>
			<view v-show="select==1" style="padding: 0 32rpx;">
				<u-waterfall v-model="flowList" ref="uWaterfall">
					<template v-slot:left="{leftList}">
						<view class="demo-warter" style="margin-right: 26rpx;" v-for="(item, index) in leftList"
							:key="index">
							<!-- 警告：微信小程序中需要hx2.8.11版本才支持在template中结合其他组件，比如下方的lazy-load组件 -->
							<!-- <u-lazy-load style="position: relative;z-index: -1;" threshold="-450" border-radius="0" :image="item.image" :index="index">
							</u-lazy-load> -->
							<image :src="item.thumbnail" mode="widthFix"
								style="width: 100%;border-top-left-radius: 16rpx !important;border-top-right-radius: 16rpx !important;">
							</image>
							<view class="demo-title">
								{{item.goodsName}}
							</view>
							<view style="padding:15rpx 20rpx;display: flex;position: relative;">
								<view class="yuanxing"></view>
								<view class="demo-price">
									{{item.points}}
								</view>
								<view v-if="item.points<=jifen" class="lijiduihuan" @click="toGoods(item)">立即兑换</view>
								<view v-else class="lijiduihuanbuzu">积分不足</view>
							</view>



						</view>
					</template>
					<template v-slot:right="{rightList}">
						<view class="demo-warter" style="margin-right: 26rpx;" v-for="(item, index) in rightList"
							:key="index">
							<!-- 警告：微信小程序中需要hx2.8.11版本才支持在template中结合其他组件，比如下方的lazy-load组件 -->
							<!-- <u-lazy-load style="position: relative;z-index: -1;" threshold="-450" border-radius="0" :image="item.image" :index="index">
							</u-lazy-load> -->
							<image :src="item.thumbnail" mode="widthFix"
								style="width: 100%;border-top-left-radius: 16rpx !important;border-top-right-radius: 16rpx !important;">
							</image>
							<view class="demo-title">
								{{item.goodsName}}
							</view>
							<view style="padding:15rpx 20rpx;display: flex;position: relative;">
								<view class="yuanxing"></view>
								<view class="demo-price">
									{{item.points}}
								</view>
								<view v-if="item.points<=jifen" class="lijiduihuan" @click="toGoods(item)">立即兑换</view>
								<view v-else class="lijiduihuanbuzu">积分不足</view>
							</view>



						</view>
					</template>
				</u-waterfall>
			</view>
		</view>
		<view style="width: 100%;height: 120rpx;"></view>
	</view>
</template>

<script>
	import {
		getMemberPointSum,
		getAllPointsDatatype
	} from "@/api/members.js";
	import {
		getPointsCategory,
		getPointsGoods,
		getPointsGoodsAll
	} from "@/api/promotions.js";
	export default {
		data() {
			return {
				yaoqingshu:0,
				isload: false,
				jifen: 0,
				select: 0,
				loadStatus: 'loadmore',
				flowList: [],
				list: [],
				// list: [{
				// 		price: 75,
				// 		title: '2022年中级会计职称...',
				// 		shop: '李白杜甫白居易旗舰店',
				// 		image: 'http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23325_s.jpg',
				// 	},
				// 	{
				// 		price: 75,
				// 		title: '2022年中级会计职称...',
				// 		shop: '李白杜甫白居易旗舰店',
				// 		image: 'http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23325_s.jpg',
				// 	},
				// 	{
				// 		price: 75,
				// 		title: '2022年中级会计职称...',
				// 		shop: '李白杜甫白居易旗舰店',
				// 		image: 'http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23325_s.jpg',
				// 	},
				// 	{
				// 		price: 75,
				// 		title: '2022年中级会计职称...',
				// 		shop: '李白杜甫白居易旗舰店',
				// 		image: 'http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23325_s.jpg',
				// 	},
				// 	{
				// 		price: 75,
				// 		title: '2022年中级会计职称...',
				// 		shop: '李白杜甫白居易旗舰店',
				// 		image: 'http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23325_s.jpg',
				// 	},
				// 	{
				// 		price: 75,
				// 		title: '2022年中级会计职称...',
				// 		shop: '李白杜甫白居易旗舰店',
				// 		image: 'http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23325_s.jpg',
				// 	},
				// 	{
				// 		price: 75,
				// 		title: '2022年中级会计职称...',
				// 		shop: '李白杜甫白居易旗舰店',
				// 		image: 'http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23325_s.jpg',
				// 	},
				// 	{
				// 		price: 75,
				// 		title: '2022年中级会计职称...',
				// 		shop: '李白杜甫白居易旗舰店',
				// 		image: 'http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23325_s.jpg',
				// 	},
				// 	{
				// 		price: 75,
				// 		title: '2022年中级会计职称...',
				// 		shop: '李白杜甫白居易旗舰店',
				// 		image: 'http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23325_s.jpg',
				// 	},
				// 	{
				// 		price: 75,
				// 		title: '2022年中级会计职称...',
				// 		shop: '李白杜甫白居易旗舰店',
				// 		image: 'http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23325_s.jpg',
				// 	},
				// 	{
				// 		price: 75,
				// 		title: '2022年中级会计职称...',
				// 		shop: '李白杜甫白居易旗舰店',
				// 		image: 'http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23325_s.jpg',
				// 	},
				// ],

				taskList: [{
						"icon": "../../static/img/credit-mission-1.png",
						"name": "提问",
						"content": "用户前十个提问被回答即可获得10积分",
						"jifen": 10,
						"siwancheng": false,
					}, {
						"icon": "../../static/img/credit-mission-2.png",
						"name": "分享好友",
						// "content": "首次分享好友后即可获得5积分",
						"content": "2022年11月01日-11月30日，邀请6位好友即可获取200积分",
						"jifen": 200,
						"siwancheng": false,
					},
					// {
					// 	"icon": "../../static/img/credit-mission-3.png",
					// 	"name": "回答问题",
					// 	"content": "回答用户问题即可获得10积分",
					// 	"jifen": 10,
					// 	"siwancheng": false,
					// }, 
					{
						"icon": "../../static/img/credit-mission-4.png",
						"name": "提问分享",
						"content": "提出的问题阅读量超过200阅读量获得积分10分，超过500阅读量再获得10分，超过1000阅读量再获得20分",
						"jifen": 10,
						"siwancheng": false,
					}
				]
			}
		},
		async mounted() {

			this.initPointData()
			this.loadGoods();
			let that = this;
			if (this.$options.filters.isLogin("auth")) {

			} else {
				uni.showModal({
					title: "提示",
					content: "检测到您的账号还未登录,是否去登录？",
					confirmColor: this.$lightColor,
					success: function(res) {
						if (res.confirm) {
							that.$options.filters.navigateToLogin();
						} else if (res.cancel) {
							uni.navigateBack();
						}
					},
				});
			}
		},

		methods: {
			getbili(){
				let bili= (this.yaoqingshu/6*100).toFixed(2);
				console.log("bili",bili)
				return bili;
			},
			async loadGoods() {
				let index = this.tabIndex;

				//获取商品数据
				let response = await getPointsGoodsAll({
					pageNumber: 1,
					pageSize: 999,
				});
				if (response.data.success) {
					this.list = [...response.data.result]
				}
				this.addRandomData()
				uni.stopPullDownRefresh();
			},
			wanchengrenwu(item) {
				if (item.name == "分享好友") {
					return
				}
				// if (item.siwancheng) {
				// 	return;
				// }
				uni.$emit("changtab", 2)
				// if (item.name == "提问") {
				// 	uni.setStorageSync("addjifen", item)
				// 	uni.$emit("changtab", 2)
				// }
			},
			tojifendetail() {
				uni.navigateTo({
					url: "/pages/mine/point/myPoint"
				})
			},

			/**
			 * 获得累计积分使用
			 */
			initPointData() {
				getMemberPointSum().then((res) => {
					console.log("pointData", res)
					this.jifen = res.data.result.point || 0;
					this.yaoqingshu=res.data.result.yaoqingshu || 0;
				});
				let params = {
					pageNumber: 1,
					pageSize: 999,
				};
				getAllPointsDatatype(params).then(res => {
					let alljifenlist = res.data.result.records;
					let taskList = this.taskList;
					alljifenlist.forEach(item => {
						// taskList.forEach(task => {
						// 	if (item.content.indexOf(task.name) > -1) {
						// 		task["siwancheng"] = true;
						// 	}

						// })

					})
				})
			},
			selectIten(index) {
				this.select = index;
			},
			toGoods(item) {
				//跳转详情
				uni.navigateTo({
					url: `/pages/promotion/point/detail?id=${item.id}`,
				});
			},
			addRandomData() {
				let countmap={}
				for (let i = 0; i < this.list.length; i++) {
					let index = this.$u.random(0, this.list.length - 1);
					// 先转成字符串再转成对象，避免数组对象引用导致数据混乱
					let item = JSON.parse(JSON.stringify(this.list[index]))
					// item.id = this.$u.guid();
					if(!countmap[item.id]){
						countmap[item.id]=item.id
						this.flowList.push(item);
					}
					
				}
				console.log("this.flowList", countmap)
			},
		}
	}
</script>


<style lang="scss" scoped>
	.demo-warter {
		width: 330rpx;
		background: #FFFFFF;
		box-shadow: 0px 0px 11rpx 1rpx rgba(206, 198, 193, 0.4400);
		border-radius: 16rpx;
		margin-bottom: 24rpx;
		position: relative;

	}




	.demo-title {
		padding: 0 20rpx;
		font-size: 28rpx;
		margin-top: 15rpx;
		color: #333333;
	}

	.demo-tag {
		display: flex;
		margin-top: 5px;
	}

	.demo-tag-owner {
		background-color: $u-type-error;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		padding: 4rpx 14rpx;
		border-radius: 50rpx;
		font-size: 20rpx;
		line-height: 1;
	}

	.demo-tag-text {
		border: 1px solid $u-type-primary;
		color: $u-type-primary;
		margin-left: 10px;
		border-radius: 50rpx;
		line-height: 1;
		padding: 4rpx 14rpx;
		display: flex;
		align-items: center;
		border-radius: 50rpx;
		font-size: 20rpx;
	}

	.demo-price {
		font-size: 28rpx;
		color: #FA5046;
		margin-top: 5px;
	}

	.demo-shop {
		font-size: 22rpx;
		color: $u-tips-color;
		margin-top: 5px;
	}

	.yuanxing {
		width: 18rpx;
		height: 18rpx;
		background: #FCED4F;
		border: 1rpx solid #FFBA31;
		border-radius: 50%;
		position: relative;
		top: 15rpx;
		margin-right: 10rpx;
	}

	.lijiduihuan {
		width: 136rpx;
		height: 48rpx;
		line-height: 48rpx;
		background: #FF9240;
		border-radius: 12rpx;
		position: absolute;
		right: 22rpx;
		font-size: 24rpx;
		color: #FFFFFF;
		text-align: center;
	}

	.lijiduihuanbuzu {
		width: 136rpx;
		height: 48rpx;
		line-height: 48rpx;
		background: #FFC8A9;
		border-radius: 12rpx;
		position: absolute;
		right: 22rpx;
		font-size: 24rpx;
		color: #FFFFFF;
		text-align: center;
	}
</style>
<style>
	.u-wrap {
		border-top-left-radius: 16rpx !important;
		border-top-right-radius: 16rpx !important;
	}
</style>
